import React, { useState } from 'react'
import { addPreson } from './store/TickpresonSlice'
import { useSelector, useDispatch } from 'react-redux'
import {
  List,
  Popup,
  Button,
  Form,
  Input,
} from 'antd-mobile'
function App() {
  const { addTick } = useSelector((state) => state.TickpresonSlice)
  console.log(addTick);
  const [visible1, setVisible1] = useState(false)
  const [form] = Form.useForm();
  const dispatch = useDispatch()
  const onFinish = () => {
    setVisible1(false)
  }
  return (
    // 循环渲染乘车人
    <div>
      <div>
        <Button block color='primary' size='large' onClick={() => setVisible1(true)}>
          新增乘客
        </Button>
        <List>
          {
            addTick?.map((item, ind) => (
              <List.Item key={ind} description={item.code}>{item.name}</List.Item>
            ))
          }
        </List>
      </div>
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false)
        }}
        onClose={() => {
          setVisible1(false)
        }}
        bodyStyle={{ height: '40vh' }}
      >
        <Form
          form={form}
          onFinish={onFinish}
          layout='horizontal'
          footer={
            <Button block type='submit' color='primary' size='large'>
              提交
            </Button>
          }
        >
          <Form.Item
            name='name'
            label='姓名'
            rules={[{ required: true, message: '姓名不能为空' }]}
          >
            <Input onChange={console.log} placeholder='请输入姓名' />
          </Form.Item>
          <Form.Item
            name='code'
            label='身份证'
            rules={[{ required: true, message: '身份证不能为空' }]}
          >
            <Input onChange={console.log} placeholder='请输入身份证' />
          </Form.Item>
        </Form>
      </Popup>
    </div>
  )
}

export default App
